<template>
  <div class="notes">
    <div class="head">
      <h1>手记</h1>
    </div>
    <div class="write">
      <img src="../assets/img/icon.png" alt="" />
      <router-link tag="p" :to="'/upload'">写一条</router-link>
    </div>
    <!-- <div class="swiper">
      <div class="swiper_content">
        <div class="item">
          <img src="../assets/img/12.webp" alt="" />
          <p>会魔法的美</p>
        </div>
        <div class="item">
          <img src="../assets/img/12.webp" alt="" />
          <p>会魔法的美</p>
        </div>
        <div class="item">
          <img src="../assets/img/12.webp" alt="" />
          <p>会魔法的美</p>
        </div>
        <div class="item">
          <img src="../assets/img/12.webp" alt="" />
          <p>会魔法的美</p>
        </div>
        <div class="item">
          <img src="../assets/img/12.webp" alt="" />
          <p>会魔法</p>
        </div>
        <div class="item">
          <img src="../assets/img/12.webp" alt="" />
          <p>会魔法的美ssssssssssssssssssssssssss</p>
        </div>
        <div class="item">
          <img src="../assets/img/12.webp" alt="" />
          <p>会魔法的美</p>
        </div>
      </div>
    </div> -->
   <div class="notesbox">
       <div class="notecontent" v-for="item in songlist" :key="item.id">
      <div class="title">
        <div class="left">
          <router-link tag="div" :to="'/useritem?id='+item.user.id"
            class="img">
            <img :src="item.user.avatar" alt=""></router-link>
          <div class="name">
            <h3>{{ item.user.username }}</h3>
            <p>{{item.addtime|dateFormat}}发布
              
            </p>
          </div>
        </div>
        <div class="right">
          <div class="add">
            <!-- <img src="../assets/img/add.png" alt="" />
            <p>关注</p> -->
            <!-- <p class="haveadd">已关注</p> -->
          </div>

          <span><img src="../assets/img/Zk1.png" alt="" /></span>
        </div>
      </div>
      <p>{{ item.title==''?'勇敢少年':item.title }}</p>
      <router-link  tag="div" :to="'/noteitem?id='+item.id" class="middle con">
        <span class="com" v-if="item.topics">#{{ item.topics[0].name }}</span>
        <span>{{item.content==''?'为爱冲锋的勇士':item.content}}</span>
      </router-link>
      <div class="showimg" v-if="item.images">
        <div
          class="showimg_box"
          v-for="(img, index) in item.images.slice(0, 3)"
          :key="index"
        >
          <img :src="img" alt="" />
        </div>
      </div>
      <div class="like">
        <div class="likeit">
          <img src="../assets/img/like.png" alt="" />
          <!-- <img src="../assets/img/likes.png" alt=""> -->
          <span>{{ item.count.count_liked }}</span>
        </div>
        <div class="comments">
          <img src="../assets/img/Comments.png" alt="" />
          <span>{{ item.count.count_commented }}</span>
        </div>
        <div class="share">
          <img src="../assets/img/share.png" alt="" />
          <span>{{ item.count.count_shared }}</span>
        </div>
      </div>
    </div>
   </div>

    <tab-bar></tab-bar>
  </div>
</template>

<script>
import { getSong } from "../api/song";
import tabBar from "../components/tabBar.vue";
export default {
  data() {
    return {
      songlist: null,
    };
  },
  methods: {
    // 获取手记的数据
    getSongFun() {
      getSong().then((data) => {
        this.songlist = data.data.list;
        let tempnote=JSON.parse(window.localStorage.getItem('note'))
      if (tempnote!=null) {
          this.songlist.unshift(tempnote)
      }
        // console.log(this.songlist);
      });
    },
   
  },
  created() {
    this.getSongFun();
  },
  

  components: {
    tabBar,
  },
   filters: {
			dateFormat(val){
				let date = new Date(val);
				
				let M = date.getMonth().toString().padStart(2,"0");
				let d = date.getDate().toString().padStart(2,"0");
				
				return `${M}-${d}`
			}
		}
};
</script>

<style lang="less" >
body {
  background-color: #f2f2f2;
}
.notes {
  .head {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 500;
    background-color: #fff;
  }
  .write {
    position: fixed;
    right: 10px;
    top: 11px;
    z-index: 502;
    padding: 5px 13px;
    border-radius: 15px;
    background-color: rgb(249, 229, 221);
    display: flex;
    img {
      display: block;
      width: 15px;
      margin-right: 5px;
    }
    p {
      font-size: 12px;
      color: #f21618;
      font-weight: 500;
    }
  }
  .swiper {
    margin-top: 55px;
    // height: 80px;
    width: 100%;
    .swiper_content {
      padding: 15px;
      background-color: #fff;
      display: flex;
      overflow-x: auto;
      border-bottom: 3px solid #f2f2f2;

      &::-webkit-scrollbar {
        display: none;
      }
      .item {
        width: 20%;
        margin-right: 15px;
        img {
          display: block;
          width: 70px;
          height: 70px;
          border-radius: 5px;
        }
        p {
          font-size: 12px;
          padding: 5px 0px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .notesbox{
    margin-top: 50px;
    margin-bottom: 60px;
    .notecontent {
    width: 95%;
    margin: 0 auto;
    // height: 200px;
    padding: 5px 9px;
    margin-top: 10px;
    background-color: #fff;
    .title {
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        position: relative;
        .img {
          width: 35px;
          height: 35px;

        img{
          border-radius: 50%;
          height: 35px;
          width: 35px;
        }
          
          background-repeat: no-repeat;
          background-size: cover;
        }
        .name {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-left: 8px;
          h3 {
            font-size: 14px;
            font-weight: 600;
          }
          p {
            font-size: 10px;
            color: gray;
          }
        }
        .vip {
          position: absolute;
          top: 25px;
          left: 22px;
          img {
            width: 12px;
          }
        }
      }
      .right {
        display: flex;
        align-items: baseline;
        .add {
          display: flex;
          padding-right: 15px;
          img {
            display: block;
            width: 10px;
            height: 10px;
            margin: 4px 5px;
          }
          p {
            color: #f21618;
            font-size: 13px;
          }
          .haveadd {
            color: gray;
          }
        }

        span {
          display: block;
          img {
            width: 12px;
          }
        }
      }
    }
    .middle {
      padding: 3px 0px;
    
      span {
        font-size: 13px;
      }
      .com {
        color: blue;
      }
    }
    .con{
      text-overflow:ellipsis;
      overflow: hidden;
      display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3; 
    }
    .showimg {
      display: flex;
      flex-wrap: nowrap;
      padding: 10px 0px;
      border-bottom: 1px solid #f2f2f2;
      .showimg_box {
        width: 30%;
        border-radius: 5px;
        overflow: hidden;
        margin-right: 13px;
        img {
          width: 107px;
          height: 107px;
        }
      }
      .showimg_box:last-child {
        margin-right: 0px;
      }
    }
    .like {
      display: flex;
      justify-content: space-around;
      padding: 10px 0px;
      .likeit,
      .comments,
      .share {
        width: 30%;
        display: flex;
        justify-content: center;
        img {
          display: block;
          width: 17px;
          height: 17px;
          margin-right: 5px;
        }
        span {
          display: block;
          height: 20px;
          line-height: 20px;
          color: gray;
          font-size: 13px;
        }
      }
      // .likeit{
      //     img{
      //         width: 17px;
      //         height: 17px;
      //     }
      // }
    }
  }
  }
 
 
}
</style>